<style>
    .form-commonsearch .form-group {
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }

    form.form-commonsearch .control-label {
        padding-right: 0;
    }

    .tdtitle {
        margin-bottom: 5px;
        font-weight: 600;
    }

    #channeltree {
        margin-left: -6px;
    }

    #channelbar .panel-heading {
        height: 55px;
        line-height: 25px;
        font-size: 14px;
    }

    @media (max-width: 1230px) {
        .fixed-table-toolbar .search .form-control {
            display: none;
        }
    }

    @media (min-width: 1200px) {
    }

    .archives-label span.label {
        font-weight: normal;
    }

    .archives-title {
        max-width: 400px;
        min-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .setflag label {
        font-weight: 400;
    }

    .nav > li.toggle-channel {
        display: none;
    }

    .col-full-width .nav > li.toggle-channel {
        display: inline-block;
    }

    #myTabContent {
        background-color: #fff;
    }

    #channeloperate > span {
        font-size: 14px;
        color: #777;
    }

    #channeloperate > span:first-child {
        margin-right: 10px;
    }

    #channeloperate > span label {
        font-weight: 400;
    }

    .row-eq-height {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

</style>

<style data-render="darktheme">
    body.darktheme #myTabContent {
        background-color: #333;
    }

    body.darktheme .tagsinput {
        background-color: #3c3e3d;
        border-color: #444;
        color: #ccc;
    }

    body.darktheme .sim-tree a {
        color: #ccc;
    }

    body.darktheme .sim-tree .sim-icon-d:before {
        border-top-color: #ccc;
    }

    body.darktheme .sim-tree .sim-icon-r:before {
        border-left-color: #ccc;
    }
</style>

<link rel="stylesheet" href="__CDN__/assets/addons/cms/css/simtree.css"/>

<div class="row row-eq-height">
    <div class="col-md-2 pr-0" id="channelbar">
        <div class="panel panel-default panel-intro" style="height: 100%;">
            <div class="panel-heading">
                <div class="panel-lead">
                    <div class="pull-left">
                        <em>{:__('Channel list')}</em>
                    </div>
                    <div class="pull-right">
                        <a href="javascript:;" class="btn btn-link btn-xs btn-channel hidden-xs hidden-sm"><i class="fa fa-bars"></i></a>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div id="channeloperate">
                    <span><input type="checkbox" name="" id="expandall" checked/> <label for="expandall">{:__('Expand all')}</label></span>
                    <span class=""><input type="checkbox" name="" id="multiselect"/> <label for="multiselect">多选模式</label></span>
                </div>
                <div id="channeltree">
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        if (window.innerWidth < 768) {
            document.getElementById('channelbar').className = document.getElementById('channelbar').className.replace("pr-0", "hidden");
        }
    </script>
    <div class="col-xs-12 col-md-10" id="archivespanel">
        <div class="panel panel-default panel-intro" style="background: #f1f4f6;padding-top: 0;padding-bottom: 0;box-shadow: none;">
            <div class="panel-heading">
                {:build_heading(null,FALSE)}
                <ul class="nav nav-tabs" data-field="status">
                    <li class="toggle-channel"><a href="javascript:;" class="btn-channel"><i class="fa fa-bars"></i></a></li>
                    <li class="active"><a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a></li>
                    {foreach name="statusList" item="vo"}
                    <li><a href="#t-{$vo}" data-value="{$key}" data-toggle="tab">{$vo}</a></li>
                    {/foreach}
                </ul>
            </div>
            <div id="myTabContent" class="tab-content" style="padding:15px;">
                <div class="tab-pane fade active in" id="one">
                    <div class="widget-body no-padding">
                        <div id="toolbar" class="toolbar">
                            {:build_toolbar('refresh,add,del')}
                            <a class="btn btn-info btn-move dropdown-toggle btn-disabled disabled"><i class="fa fa-arrow-right"></i> {:__('Move')}</a>
                            <div class="dropdown btn-group {:$auth->check('cms/archives/multi')?'':'hide'}">
                                <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
                                <ul class="dropdown-menu text-left" role="menu">
                                    <li><a class="btn btn-link btn-copyselected btn-disabled disabled" href="javascript:;"><i class="fa fa-copy"></i> {:__('Copy selected')}</a></li>
                                    <li><a class="btn btn-link btn-setspecial btn-disabled disabled" href="javascript:;"><i class="fa fa-newspaper-o"></i> {:__('Join to special')}</a></li>
                                    <li><a class="btn btn-link btn-settag btn-disabled disabled" href="javascript:;"><i class="fa fa-tags"></i> {:__('Join to tag')}</a></li>
                                    <li><a class="btn btn-link btn-setflag btn-disabled disabled" href="javascript:;"><i class="fa fa-flag"></i> {:__('Set flag')}</a></li>
                                    <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a></li>
                                    <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to hidden')}</a></li>
                                    <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=rejected"><i class="fa fa-exclamation-circle"></i> {:__('Set to rejected')}</a></li>
                                    <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=pulloff"><i class="fa fa-arrow-circle-down"></i> {:__('Set to pulloff')}</a></li>
                                </ul>
                            </div>
                            <a class="btn btn-success btn-recyclebin btn-dialog" href="cms/archives/recyclebin" title="{:__('Recycle bin')}"><i class="fa fa-recycle"></i> {:__('Recycle bin')}</a>
                        </div>
                        <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                               data-operate-edit="{:$auth->check('cms/archives/edit')}"
                               data-operate-del="{:$auth->check('cms/archives/del')}"
                               width="100%">
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script id="channeltpl" type="text/html">
    <div class="">
        <div class="alert alert-warning-light ui-sortable-handle" style="cursor: move;">
            <b>{:__('Warning')}</b><br>
            {:__('Move tips')}
        </div>
        <!-- /.box-body -->
        <div class="text-black">
            <div class="row">
                <div class="col-sm-12">
                    <select name="channel" class="form-control">
                        <option value="0">{:__('Please select channel')}</option>
                        {$channelOptions}
                    </select>
                </div>
            </div>
            <!-- /.row -->
        </div>
    </div>
</script>
<script id="specialtpl" type="text/html">
    <div class="">
        <div class="text-black">
            <div class="row">
                <div class="col-sm-12">
                    <select name="special" class="form-control selectpicker" data-live-search="true">
                        <option value="0">{:__('Please select special')}</option>
                        {foreach name="specialList" id="item"}
                        <option value="{$item['id']}">{$item['title']}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <!-- /.row -->
        </div>
    </div>
</script>
<script id="flagtpl" type="text/html">
    <div class="setflag">
        <div class="text-black">
            <div class="row">
                <div class="col-sm-12">
                    <p><b>标志：</b></p>
                    <!--@formatter:off-->
                        {foreach name="flagList" item="vo"}
                        <label for="flag-{$key}"><input type="checkbox" id="flag-{$key}" value="{$key}" name="flag[]"> {$vo}</label>
                        {/foreach}
                    <!--@formatter:on-->
                    <p><b>操作：</b></p>
                    <p>
                        <label for="type-add"><input type="radio" name="type" value="add" id="type-add" checked> 添加</label>
                        <label for="type-remove"><input type="radio" name="type" value="del" id="type-remove"> 移除</label>
                    </p>
                </div>
            </div>
            <!-- /.row -->
        </div>
    </div>
</script>

<script id="tagtpl" type="text/html">
    <div class="">
        <div class="row">
            <div class="col-sm-12">
                <div style="margin-bottom:5px;">
                    请输入一个或多个标签
                </div>
            </div>
            <div class="col-sm-12">
                <input id="c-tags" data-rule="" class="form-control" placeholder="输入后空格确认" name="tags" type="text" value="">
            </div>
        </div>
        <!-- /.row -->
    </div>
</script>
